<template>
  <div class="basic-example">
    <h2>基础示例 - Form 组件</h2>
    
    <Form
      :mode="7"
      :attMap="formData"
      :fldList="fields"
      :colNum="1"
    />
  </div>
</template>

<script>
import Form from '../../components/CxForm/cx-form/Form.vue'

export default {
  name: 'BasicExample',
  
  components: {
    Form
  },
  
  data() {
    return {
      // 表单数据
      formData: {
        username: '',
        password: '',
        email: ''
      },
      
      // 字段配置
      fields: [
        {
          colname: 'username',
          namec: '用户名',
          disptype: 1,
          disporder: 1,
          nullable: 0,
          editable: true,
          tabname: 'user',
          value: ''
        },
        {
          colname: 'password',
          namec: '密码',
          disptype: 1,
          disporder: 2,
          nullable: 0,
          editable: true,
          tabname: 'user',
          value: ''
        },
        {
          colname: 'email',
          namec: '邮箱',
          disptype: 1,
          disporder: 3,
          nullable: 1,
          editable: true,
          tabname: 'user',
          value: ''
        }
      ]
    }
  },
  
  created() {
    // 初始化 cx 全局对象
    if (!window.cx) {
      window.cx = {
        consts: {
          DISP_TEXTBOX: 1,
          ATT_ADD: 7,
          ATT_EDIT: 5,
          ATT_QUERY: 6
        }
      }
    }
  }
}
</script>

<style scoped>
.basic-example {
  padding: 20px;
  margin: 0 auto;
}

h2 {
  margin-bottom: 20px;
  color: #333;
}
</style>
